<template>
  <div class="box">
    <div class="head-search">
      <el-form :inline="true" :model="searchData" ref="ruleForm">
        <el-form-item v-for="(item, index) in tjfz"
                      :key="index"
                      :label="item.dictLabel + '：'">
          <!--toLowerCase() 转换为小写-->
          <el-input v-if="item.remark !== 'select'"
                    v-model="searchData[item.dictValue.toLowerCase()]"
                    size="small"
                    clearable
                    placeholder="请输入"></el-input>

          <!--正常的下拉选择框-->
          <el-select size="small"
                     class="select"
                     :style="{'width': item.dictValue.toLowerCase() === 'qzh' ? '300px': '180px'}"
                     v-if="item.remark === 'select'"
                     multiple
                     clearable
                     v-model="searchData[item.dictValue.toLowerCase()]"
                     placeholder="请选择">
            <el-option v-for="itemSelect in selectOptions[item.dictValue.toLowerCase()]"
                       :key="itemSelect.dictValue"
                       :label="itemSelect.dictLabel"
                       :value="itemSelect.dictValue"></el-option>
          </el-select>
        </el-form-item>

        <!--<el-form-item>

        </el-form-item>-->
      </el-form>
      <list-change-menu ref="changeCondition" class="menu"></list-change-menu>
      <div class="text-right">
        <el-button size="small"
                   style="float: left"
                   type="primary"
                   :loading="basicsLoading"
                   @click="getBasics">生成基础统计数据
        </el-button>
        <el-button @click="handleSearch"
                   size="small"
                   type="primary"
                   :loading="tableLoading"
                   icon="el-icon-search">查询
        </el-button>
        <el-button size="small"
                   :loading="tableLoading"
                   @click="resetForm('ruleForm')"
                   icon="el-icon-refresh-right">重置
        </el-button>
      </div>
    </div>

    <div class="list-box" v-if="isStatistics">
      <el-table
        :data="tableData"
        height="calc(100vh - 200px)"
        v-loading="tableLoading"
        class="table">
        <el-table-column label="分组显示">
          <el-table-column
            show-overflow-tooltip
            prop="categoryName"
            align="center"
            sortable
            label="档案门类">
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            v-for="(item, index) in tableHead.tjfz"
            :key="index"
            :prop="item.dictValue.toLowerCase()"
            align="center"
            sortable
            :label="item.dictLabel">
          </el-table-column>

        </el-table-column>

        <el-table-column v-if="tableHead.tjjg.length>0" label="统计结果">
          <el-table-column
            show-overflow-tooltip
            v-for="(item, index) in tableHead.tjjg"
            :key="index"
            sortable
            :prop="item.dictValue"
            align="center"
            :label="item.dictLabel">

          </el-table-column>
        </el-table-column>

      </el-table>

    </div>

    <el-drawer
      :title="setDrawer.title"
      :size="setDrawer.size"
      :direction="setDrawer.direction"
      :visible.sync="drawer"
    >
      <condition-setting></condition-setting>
    </el-drawer>

  </div>
</template>

<script>
import ListChangeMenu from './listChangeMenu'
import ConditionSetting from './conditionSetting'
import { getBasicsStatistics, getDataStatistics } from '../../../../../api/statistics/dataStatistics'
import { getArchivesDicId, getSysDicDetList } from '../../../../../api/dictionary/dictionary'
import { getQzDic } from '../../../../../api/quanzong/quanzong'

export default {
  name: 'dataBaseStatistics',
  components: {
    ConditionSetting,
    ListChangeMenu
  },
  data () {
    return {
      treeData: [], // 门类
      tableLoading: false,
      searchData: {},
      selectOptions: {},
      drawer: false,
      setDrawer: {
        title: '条件设置',
        size: '70%',
        direction: 'rtl'
      },
      tjfz: [], // 头部筛选条件 -
      tableHead: {
        tjjg: [] // 统计结果
      },
      isStatistics: false,
      basicsLoading: false,
      tableData: []
    }
  },
  mounted () {
    this.getSearchFormItem()
  },
  methods: {
    // 获取查询条件
    getSearchFormItem () {
      const param = {
        pageSize: 1000,
        pageNo: 1,
        params: [{
          op: 'eq',
          name: 'dictTypeName',
          value: 'tjfz'
        }]
      }
      const queryArr = ['qzh', 'bgqx']
      getSysDicDetList(param).then(res => {
        this.tjfz = res.data.data.list
        this.tjfz.map(item => {
          this.$set(this.searchData, item.dictValue.toLowerCase(), '')
          if (item.remark === 'select' && !queryArr.includes(item.dictValue.toLowerCase())) {
            console.log('需要请求的数据字典！ ---  ' + item.dictValue)
          }
        })
      })
      // 保管期限
      getArchivesDicId('retention_type').then(res => {
        this.$set(this.selectOptions, 'bgqx', res.data.data)
      })
      // 全宗号
      getQzDic({
        pageNo: 1,
        pageSize: 1000
      }).then(res => {
        const arr = []
        res.data.data.list.map(item => {
          arr.push({
            dictLabel: item.fondsNo + ' ' + item.fondsName,
            dictValue: item.fondsNo
          })
        })
        this.$set(this.selectOptions, 'qzh', arr)
      })
    },
    resetForm () {
      Object.keys(this.searchData).forEach(key => {
        this.searchData[key] = ''
      })
      this.$refs.changeCondition.reset()
    },
    handleSearch () {
      // 搜索  条件设置结果 this.$refs.changeCondition.getListData()
      // 统计分组 选中之后为分组显示的二级表头，统计结果选中之后，为统计结果的表头
      // 通过选中的参数设置查询条件，以及表头
      this.tableHead = JSON.parse(JSON.stringify(this.$refs.changeCondition.getListData()))
      this.isStatistics = true
      this.getList()
    },
    handleSeniorSetting () {
      // 条件设置
      this.drawer = true
    },
    getBasics () {
      this.basicsLoading = true
      getBasicsStatistics().then(res => {
        this.$message.success('统计基础数据生成成功!')
        this.basicsLoading = false
      }).catch(() => {
        this.basicsLoading = false
      })
    },
    async getList () {
      this.tableLoading = true
      const param = {
        idCategorys: this.tableHead.idCategoryChange.join(','),
        groupValues: this.tableHead.tjfzChange.join(','),
        countType: this.tableHead.tjjgChange,
        params: [],
        sorters: []
      }
      Object.keys(this.searchData).forEach(key => {
        if (typeof (this.searchData[key]) === 'object' && this.searchData[key].length > 0) {
          param.params.push({
            name: key,
            op: 'in',
            values: this.searchData[key]
          })
        } else if (typeof (this.searchData[key]) !== 'object' && this.searchData[key]) {
          param.params.push({
            name: key,
            op: 'like',
            value: this.searchData[key]
          })
        }
      })
      if (param.groupValues) {
        param.sorters = [{
          asc: true,
          name: param.groupValues
        }]
      }

      if (param.countType.length < 1) {
        delete param.countType
      }
      if (!param.idCategorys) {
        delete param.idCategorys
      }
      if (!param.groupValues) {
        delete param.groupValues
      }
      if (param.params.length < 1) {
        delete param.params
      }
      if (param.sorters.length < 1) {
        delete param.sorters
      }

      await getDataStatistics(param).then(res => {
        this.tableData = res.data.data
        this.tableLoading = false
      }).catch(() => {
        this.tableLoading = false
      })
    },
    handleSizeChange (val) {
      this.page.pageSize = val
      this.getList()
    },
    handleCurrentChange (val) {
      this.page.pageNo = val
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
  .head-search {
    display: block;

    .result {
      border: 1px solid #dcdcdc;
      padding: 0px 20px 10px;
      border-radius: 4px;

      hgroup {
        color: #333;
        line-height: 40px;
      }

      .result-content {
        background: #eaeaea;
        padding: 10px;
        border-radius: 4px;
      }
    }

    .menu {
      background: #eaeaea;
      margin: 10px auto;
    }

    .select {
      ::v-deep .el-input {
        width: 100%;
      }
    }
  }

  ::v-deep .el-drawer__body {
    overflow-y: auto;
  }
</style>
